<template>
<div>
    <Upload
        multiple
        type="drag"
        name="avatar"
        :on-success="submitSuccess"
        action="http://localhost:3000/upload/img">
        <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>点击或将文件拖拽到这里上传</p>
        </div>
    </Upload>
    <div class="layout">
        <Row type="flex">
            <Col span="3" class="layout-menu-left">
                <Tree :data="baseData" @on-select-change="changeCateId"></Tree>
            </Col>
            <Col span="21">
                <div class="layout-content">
                    
                   
                    <Button type="primary" @click="getData"><Icon type="refresh"></Icon>&nbsp;刷新</Button>&nbsp;&nbsp;
                    <Button type="error" @click="deleteData" ><Icon type="android-delete"></Icon>&nbsp;删除</Button>
                    <Input  icon="ios-search" v-model="filter.filename" placeholder="请输入..." style="width: 200px" @on-click="searchitem"></Input>
                   
                        <Modal v-model="modal1" title="添加新闻">
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                            <FormItem label="filename" prop="filename">
                                <Input v-model="formValidate.filename" placeholder="请输入标题"></Input>
                            </FormItem>
                            <FormItem label="fieldname" prop="fieldname">
                                <Input v-model="formValidate.fieldname" placeholder="请输入作者名字"></Input>
                            </FormItem>
                            
                            <FormItem label="originalname" prop="originalname">
                                <Input v-model="formValidate.originalname"  placeholder="请输入..."></Input>
                            </FormItem>
                            <FormItem label="选择日期">
                                <Row>
                                    <Col span="11">
                                        <FormItem prop="date">
                                            <DatePicker type="date" placeholder="选择日期" v-model="formValidate.date"></DatePicker>
                                        </FormItem>
                                    </Col>
                                    
                                </Row>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formValidate')" >提交</Button>
                                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                            </FormItem>
                            
                        </Form>
                    
                        </Modal>
                    <Table :columns="columns1" border ref="selection" :data="list" @on-selection-change="chose"></Table><br/>
                    <Button @click="handleSelectAll(true)">设置全选</Button>
                    <Button @click="handleSelectAll(false)">取消全选</Button><br/><br/>
                    <Page :total="filter.total" :current="filter.page" show-elevator :page-size="filter.limit" @on-change="changepage" placement="top" show-sizer @on-page-size-change="onPageSizeChange"></Page><br/><br/>
                </div>
            </Col>
        </Row>
    </div>
</div>
</template>
<script>
import Base from '../../common/Base.js';
    export default {
    mixins:[Base],  
    data(){
        return {
            cateId:'',
            baseData:[],
            module:'upload',
            formValidate: {
                    filename: '',
                    date:'',
                    fieldname: '',
                    originalname: '',
                },
                 ruleValidate: {
                    filename: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    fieldname: [
                        { required: false, message: '邮箱不能为空', trigger: 'blur' },
                       
                    ],
                    date: [
                        { required: true, type: 'date', message: '请选择日期', trigger: 'change' }
                    ],
                    originalname: [
                        { required: true, message: '请输入个人介绍', trigger: 'blur' },
                      
                    ]
                },
            columns1: [
                    {
                        type: 'selection',
                        width: 35,
                        align: 'center'
                    },
                    {
                        title: 'filename',
                        key: 'filename'
                    },
                    {
                        title: 'fieldname',
                        key: 'fieldname'
                    },
                    {
                        title: 'originalname',
                        key: 'originalname'
                    },
                    {
                        title: 'encoding',
                        key: 'encoding'
                    },
                    {
                        title: 'mimetype',
                        key: 'mimetype'
                    },
                    {
                        title: 'date',
                        key: 'date'
                    },
                    {
                        title: 'size',
                        key: 'size'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 155,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editmode=true;
                                            this.editData(params.row._id);
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.removeData(params.row._id,params.index,params.row.filename);
                                        }
                                    }
                                }, '删除')
                                
                            ]);
                        }
                    }
                ]
        }
    },
    methods:{
        handleSelectAll (status) {
            this.$refs.selection.selectAll(status);
        },
        changeCateId(selcetion){
             if(selcetion.length!==0)
                {
                    this.cateId=selcetion[0]._id;
                    this.filter.cateId=selcetion[0]._id;
                    this.filter.page=1;
                }else{
                    this.changeCateId(selcetion);
                }
                this.getData();
        },
        submitSuccess(res,file){
            res=Object.assign(res, {cateId:this.cateId})
                //console.log(res);
                //console.log(this.cateId);
                if(this.cateId!=null){
                    this.$http({
                        method:'POST',
                        url:`http://localhost:3000/upload/data`,
                        data:res
                    }).then(res=>{
                        //this.changePage(this.filter.page)
                        //this.getData();
                        console.log(res);
                        this.getData();
                    })
                }
            
            
        }
    },  
    created(){
        this.$http({
            url:'http://localhost:3000/cate/list/2',
            method:'get'
        }).then(res=>{
            this.baseData=res.data;
        })
    }
    }
</script>
<style scoped>
 .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
    }
    .layout-breadcrumb{
        padding: 10px 15px 0;
    }
    .layout-content{
        min-height: 520px;
       
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    
    .layout-copy{
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
    .layout-menu-left{
        padding-left:5px;
        background: #f8f8f9;
    }
    .layout-header{
        height: 60px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .layout-logo-left{
        width: 90%;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        margin: 15px auto;
    }
</style>

